<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>速翔网络</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<style>
		html,body{

		}
		body {
			background-color: #D0242A;
			color: #ffcf9e;

		}

		#sx-header .aui-pull-left {
			width: 3rem;
		}
		#sx-header .aui-pull-left img{
			position: absolute;
			top: 0.25rem;
			left: 0.4rem;
			width: 1.8rem;
		}
		#sx-header{
			position: fixed;
			top: 0;
			left: 0;
			background-color:rgba(254, 44, 85, 0);
		}
		#sx-header .aui-title{
			opacity: 0;
		}
		.t{
			/*background: #f00;*/

			/*background-image: linear-gradient(rgba(250, 126, 52, 1), rgba(250, 126, 52,0));*/
			position: relative;
		}
		.t img.t_img{
			width: 14rem;
			height: auto;
			position: relative;
			margin: 0 auto;
			height: 15rem;
		}
		.b{
			margin-top: -5rem;
			position: relative;
			z-index: 9;
		}
		.b .list{
			background-color: #D0242A;
		}
		.li,.l{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.l img{
			width: 2rem;
			border-radius: 50%;
		}
		.username{
			font-size: 0.7rem;
		}
		.time{
			font-size: 0.55rem;
		}
		.user{
			padding-left: 0.5rem;
		}
		.ul{
			padding: 0.75rem;
			padding-top: 0.35rem;
		}
		.li{
			padding: 0.5rem 0.35rem;
		}
		.title{
			padding: 0.35rem 0;
			border-bottom: 1px solid #ffcf9e;
			margin:0 0.75rem;
			font-size: 0.75rem;
		}
		.r{
			font-size: 0.65rem;
		}
		.list{
			padding-bottom: 5rem;
		}
		.img_text{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			text-align: center;
			margin: 0 auto;
			padding-top: 5.5rem;
			color: #964A21;
		}
		.img_user{
			justify-content: center;
			align-items: center;
			display: flex;
			font-size: 0.85rem;
			z-index: 99
		}
		.img_user img{
			width: 1.8rem;
			border-radius: 50%;
			margin-right: 0.35rem;
		}
		.money{
			font-size: 0.65rem;
			color: #C51926;
			padding: 0.25rem 0;
		}
		.money b{
			font-size: 2rem;
			padding-right: 0.25rem;
		}
		.p{
			font-size: 0.65rem;
		}
		.btn{
			width: 100%;
			margin: 0 auto;
			margin-bottom: 1rem;
			/*position: relative;*/
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
		}
		.btn img{
			height: 2.8rem;
			width: 78%;
			margin: 0 auto;
			text-align: center;
		}
		.btn div{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			text-align: center;
			line-height: 2.8rem;
			color: #C51926;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<header class="aui-bar aui-bar-nav" id="sx-header">
		<a class="aui-pull-left aui-btn" tapmode onclick="_close()">
			<img src="../i/hongbao/left.png"/>
		</a>
		<div class="aui-title">天天折红包</div>
	</header>

	<script id="sx-list" type="text/x-dot-template">
		<div class="t">
			<img src="../i/hongbao/tixian_0.png" class="t_img">
			<div class="img_text">
				<div class="img_user">
					<img suxiangw-src="{{= _getPrefs('_user').img ? _img(_getPrefs('_user').img,60,60) : '../i///qiniu.live.kxg99.com../i/bo/touxiang.png' }}" src="../i/touxiang.png"  >
					<span>感谢你帮我助力</span>
				</div>
				<div class="money"><b>{{= it.money}}</b>元</div>
				<div class="p">恭喜你获得现金</div>
			</div>
		</div>
		<div class="b">
			<div class="img">
				<img src="../i/hongbao/zhuli_top.png">
			</div>
			<div class="list">
				<div class="title">
					已领取{{= it.l }}/{{= it.r}}个
				</div>
				<div class="ul">
				{{ for(var i=0,it=it.list; i < it.length; i++) { }}
					<div class="li">
						<div class="l">
							<img suxiangw-src="{{= it[i].img ? _img(it[i].img,60,60) : '../i///qiniu.live.kxg99.com../i/bo/touxiang.png' }}" src="../i/touxiang.png"   >
							<div class="user">
								<div class="username">{{= it[i].username}}</div>
								<div class="time">{{= it[i].time}}</div>
							</div>
						</div>
						<div class="r">{{= it[i].money}}元</div>
					</div>
				{{ } }}
				</div>
			</div>
		</div>
	</script>
	<div class="aui-content" id="sx-view"></div>
	<div class="btn aui-hide" tapmode onclick="url()">
		<img src="../i/hongbao/fenxiang.png" >
		<div>已存入账户，点击查看</div>
	</div>
</body>
<script type="text/javascript" src="../j/api.js"></script>
<script src="../j/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	apiready = function() {
		urls();
	 	data()
		header = $api.byId('sx-header');
		$api.fixStatusBar(header);
		header_h = $api.offset(header).h;
		w = api.winWidth
		$(window).on('scroll', function() {
			var sTop = $(window).scrollTop();
			var a = (sTop-(header_h/2))/(header_h);
			$('#sx-header').css('background-color','rgba(234, 49, 29, '+a+')');
			// $('#sx-header img.l').css('opacity',a);
			$('#sx-header .aui-title').css('opacity',a);
		});
	}
	function data(){
		_loading();
		_ajax('renwu/hongbao_zhuli_list',function(ret,err){
			_loadingCloes();
			if(ret){
					var evalData = doT.template($api.html($api.byId('sx-list')));
				 	$api.html($api.byId('sx-view'), evalData(ret));
					$('.btn').removeClass('aui-hide')
					api.parseTapmode();
					_imageCache();
			}else{
				_alert(JSON.stringify(err))
			}
		})
	}
	function url(){
		_url({url:''},'hongbao');
		api.closeToWin({
		    name: 'hongbao_zhuli'
		});
	}
</script>
</html>
